<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="styles.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>八维考试录屏文件验证</title>
  <style>
    table {
      width: 100%;
      margin: 0 auto;
      border: 1px solid #000000;
      border-collapse: collapse;
    }

    th,
    td {
      border: 1px solid #000000;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="container" id="app">

    <div class="row">
      <button type="button" @click="setPath">选择目录</button>
      <button type="button" @click="setPath(false)">选择文件</button>
      <button type="button" @click="validate($event)">开始验证</button>
    </div>

    <div class="row" style="width: 100%;text-align: left;margin-top: 20px;">
      {{path}}
    </div>

    <h1>{{message}}</h1>
    <div class="row" id="greet-msg">
      <table>
        <thead>
          <th style="width: 50px;">行号</th>
          <th>文件名</th>
          <th style="width: 80px;">验证结果</th>
        </thead>
        <tbody>
          <tr v-for="(o,i) in list">
            <td>{{i+1}}</td>
            <td>{{o.name}}</td>
            <td :style="{'background-color':( o.result ? 'green' : 'red' )}">{{o.result?'通过':'未通过'}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
<script type="module">
  import { createApp, onMounted, ref, nextTick } from './vue3.esm-browser.prod.js'


  async function validateFile(path, isFile) {
    // const { invoke } = window.__TAURI__.tauri //1.0
    const { invoke } = window.__TAURI__.core
    let list = await invoke("validate_file", { path, isFile })
    console.log(list)
    return list
  }

  async function selectPath(isDir) {
    const { open } = window.__TAURI__.dialog
    let selected
    let path
    if (isDir) {
      const { desktopDir } = window.__TAURI__.path
      path = await desktopDir()
      selected = await open({
        directory: true,
        defaultPath: path,
      });
    } else {
      selected = await open({
        multiple: false,
        filters: [{
          name: '视频',
          extensions: ['mp4']
        }]
      })
    }


    if (Array.isArray(selected)) {
      // user selected multiple directories
      path = selected[0]
    } else if (selected === null) {
      // user cancelled the selection
    } else {
      // user selected a single directory
      path = selected
    }

    return path
  }

  function init(rootElement = '#app') {
    const app = createApp({
      setup() {
        const message = ref('验证结果：')
        let path = ref('')
        let list = ref([
          //{ name: "文件1", result: "通过" }
          //, { name: "文件2", result: "通过" }

        ])
        const setPath = async (isDir = true) => {
          const p = await selectPath(isDir)
          console.log(p)
          if (!isDir && !p.endsWith(".mp4")) {
            alert('只能选择mp4文件!')
          } else {
            path.value = p
          }
        }

        const validate = async (e) => {
          if (path.value) {
            // e.currentTarget.disabled=true
            // alert(e.currentTarget.innerText + path.value)
            list.value = await validateFile(path.value, path.value.endsWith(".mp4"))
            // e.currentTarget.disabled=false
          } else {
            alert('请选择文件')
          }
        }

        return { message, list, path, setPath, validate }
      }
    })
    app.mount(rootElement)
  }
  init()
</script>

</html>